<template>
    <div class="va-carousel" @mouseenter.stop="handleMouseEnter" @mouseleave.stop="handleMouseLeave" :style="{ width: width, height: height}">
        <transition-group name="list" tag="div" class="image-list" :css="false" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave">
            <div class="image-item" :style="{width: itemWidth}" :class="{active:selectedItem==item }" v-for="(item, index) in list" :key="item.id" @click="changeItem(item, index)">
                <img :src="absUrl(item.src)" :alt="item.name" :style="{width: imgWidth, height: imgHeight}">
            </div>
            <template v-if="arrow === 'always' || (hover && arrow !== 'never') || items.length>4">
                <span key="prev" class="preview" @click="prev">
                    <i class="ivu-icon ivu-icon-chevron-left"></i>
                </span>
                <span key="next" class="next" @click="next">
                    <i class="ivu-icon ivu-icon-chevron-right"></i>
                </span>
            </template>
        </transition-group>
    </div>
</template>
<script>
import { absUrl } from '~/utils/tool'
export default {
    name: 'myCarousel',
    props: {
        items: {
            type: Array,
            default: () => {
                return []
            }
        },
        total: {
            tyep: Number,
            default: 7
        },
        height: {
            type: String,
            default: '180px'
        },
        width: {
            type: String,
            default: '90%'
        },

        imgWidth: {
            type: String,
            default: '100%'
        },
        imgHeight: {
            type: String,
            default: '100%'
        },

        autoplay: {
            type: Boolean,
            default: true
        },
        interval: {
            type: Number,
            default: 2000
        },
        prevText: {
            type: String,
            default: 'prev'
        },
        nextText: {
            type: String,
            default: 'next'
        },
        arrow: {
            type: String,
            default: 'hover'
        }

    },

    data() {
        return {
            list: [], // 当前显示的图片列表
            hover: false,
            timer: null,
            itemWidth: '',
            isReverse: false,
            selectedItem: {},
            absUrl: absUrl
        }
    },

    beforeMount() {
        this.itemWidth = 100 / this.total + '%'
        this.list = this.items.slice(0, this.total)
    },

    mounted() {
    },

    methods: {
        // 下一张
        next() {
            // 如果图片列表小于需要显示的数量，则不进行滚动
            if (this.items.length < this.total) {
                return
            }

            // 向后追加一个元素，该元素为：
            //    显示列表中最后一个元素在原数组中的后一个元素
            //    如果已经是最后一个元素，则使用第一个元素

            let indexOfItems = this.items.findIndex(
                item => item.id === this.list[this.list.length - 1].id
            )

            if (indexOfItems === this.items.length - 1) {
                // 使用第一个元素
                this.list.push(this.items[0])
            } else {
                // 使用后一个元素
                this.list.push(this.items[indexOfItems + 1])
            }
            // 移除当前显示图片中的第一个
            this.list.shift()
            this.isReverse = false
        },

        // 上一张
        prev() {
            // 如果图片列表小于需要显示的数量，则不进行滚动
            if (this.items.length < this.total) {
                return
            }
            // 向前追加一个元素, 该元素为：
            //    当前展示列表中的第一个元素在原数组中的前一个元素
            //    如果已经是第一个元素，则使用最后一个元素
            let indexOfItems = this.items.findIndex(
                item => item.id === this.list[0].id
            )

            if (indexOfItems === 0) {
                this.list.unshift(this.items[this.items.length - 1])
            } else {
                this.list.unshift(this.items[indexOfItems - 1])
            }
            // 移除当前显示列表中的最后一个元素
            this.list.pop()
            this.isReverse = true
        },

        // 点击图片
        changeItem(item, index) {
            this.selectedItem = item;
            this.$emit('on-change', item)
        },

        // 开始计时器
        startTimer() {
            if (!this.interval || this.interval <= 0) {
                return
            }
            this.timer = setInterval(this.next, this.interval)
        },

        // 暂停计时器
        pauseTimer() {
            clearInterval(this.timer)
        },

        handleMouseEnter() {
            this.hover = true
            this.pauseTimer()
        },

        handleMouseLeave() {
            this.hover = false
            // if (this.autoplay) {
            //     this.startTimer()
            // }
        },

        // 列表过渡 beging
        beforeEnter(el) {
            // 只对image-item使用过渡
            let isImageItem = el.className.indexOf('image-item') > -1
            if (isImageItem) {
                el.style.opacity = 0
                if (this.isReverse) {
                    el.style.transform = 'translateX(-100%)'
                } else {
                    el.style.transform = 'translateX(100%)'
                }
            }
        },

        enter(el, done) {
            // 只对image-item使用过渡
            let isImageItem = el.className.indexOf('image-item') > -1
            if (isImageItem) {
                this.$velocity(el, { opacity: 1, translateX: '0px' }, { complate: done })
            } else {
                done()
            }
        },

        beforeLeave(el) {
            // 只对image-item使用过渡
            let isImageItem = el.className.indexOf('image-item') > -1
            if (isImageItem) {
                el.style.position = 'absolute'
                if (this.isReverse) {
                    el.style.right = 0
                } else {
                    el.style.left = 0
                }
            }
        },

        leave(el, done) {
            // 只对image-item使用过渡
            let isImageItem = el.className.indexOf('image-item') > -1
            if (isImageItem) {
                el.style.opacity = 0
                if (this.isReverse) {
                    el.style.right = `-${this.itemWidth}`
                    // el.style.transform = 'translateX(100%)'
                } else {
                    el.style.transform = 'translateX(-100%)'
                }
                setTimeout(done, 1000)
            } else {
                done()
            }
        }
    }
}
</script>

<style scope>
.va-carousel {
  margin: 0 auto;
  overflow: hidden;
}

.image-list {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  margin: 0 auto;
  border-style: 1px solid #f6f6f6;
}

.image-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin-right: 5px;
  cursor: pointer;
  /*transition: transform 1s;*/
}

.image-item.active {
  border: 1.5px solid red;
}

.preview,
.next {
  position: absolute;
  font-size: 16px;
  /* color: white; */
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  color: white;
  background-color: rgba(31, 45, 61, 0.5);
}
.preview,
.next i {
  line-height: 36px;
}
.preview {
  left: 40px;
  transform: translateX(-100%);
}
/* .preview:hover,
.next:hover {
  color: white;
  background-color: rgba(31, 45, 61, 0.5);
} */
.next {
  right: 40px;
  transform: translateX(100%);
}
</style>

